<template>
  <div>
    <ChildComponent>
    <template #item="slotProps">
        <span>序号：{{ slotProps.index }}</span>
        <span>内容：{{ slotProps.item.text }}</span>
        <button @click="handleClick(slotProps.item)">操作</button>
      </template>
    </ChildComponent>
    <p>接收到的消息: {{ message }}</p>
    <p>最新数据: {{ JSON.stringify(latestData) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted,getCurrentInstance } from 'vue';
import ChildComponent from './Children.vue';
const handleClick = (item: any) => {
  console.log('点击了项目:', item);
};

const {proxy} = getCurrentInstance();
const message = ref('');
const latestData = ref<any>(null);

// 监听消息事件
const handleMessage = (msg: string) => {
  message.value = msg;
};

// 监听数据更新
const handleDataUpdate = (data: { id: number; value: any }) => {
  latestData.value = data;
};

onMounted(() => {
  proxy!.$eventBus.on('global-message',handleMessage);
  proxy!.$eventBus.on('data-update',handleDataUpdate)
});




onUnmounted(() => {
  // 组件卸载时移除监听
proxy!.$eventBus.off('global-message');
  proxy!.$eventBus.off('data-update');
});
</script>